<template>
  <div class="component-root-container">
    <el-header>
      <el-form ref="suppliesRule" :rules="suppliesRule" :model="supplies" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="8">
            <el-form-item label="省份:" prop="provinces">
              <el-select v-model="supplies['provinces']" @change="changePrivce($event)" placeholder="请选择" filterable
                clearable>
                <el-option v-for="(value, key) in provinces['86']" :key="key" :label="value" :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="地市:" prop="cities">
              <el-select v-model="supplies['cities']" placeholder="请选择" filterable clearable>
                <el-option v-for="(value, key) in cities" :key="key" :label="value" :value="key">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="物资/服务编码:" prop="id">
              <el-input v-model="supplies['id']" placeholder="请输入" @input="change($event)"
                clearable />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否服务类编码:" prop="isService">
              <el-select v-model="supplies['isService']" placeholder="请选择" filterable clearable>
                <el-option v-for="item in serviceAble" :key="item.value" :label="item.key" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="col_button">
            <div class="button">
              <el-button class="query" @click="buttonClick">
                查询
              </el-button>
              <el-button class="query" @click="reset">
                重置
              </el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <div class="contentInfo" style="margin-bottom:20px;">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景使用情况
          </el-col>
        </el-row>
        <el-row>
          <div class="inline">
            <div><span>调用次数/日：</span><span>{{ queryCount }}</span></div>
            <div><a class="link" href="javascript:;" @click="$router.push({name:'biz-ml'})">详情</a></div>
          </div>
        </el-row>
      </div>
      <div class="contentInfo">
        <el-row>
          <el-col class="header-title">
            <span class="header-vertical" />
            场景说明
          </el-col>
        </el-row>
        <el-row>
          <div class="page-tip">
            <div class="description">通过内存数据库的封装服务对已发生过采购的产品的历史成交价进行比对，参考比对结果未发生过采购关系的同类产品物资编码给出4档位参考价格提示，分别是25分位价格、50分位数价格、75分位价格、最高价格，对未发生过采购但同类物资发生过采购的物资提供具有参考意义的价格，避免发生采购价格异常的情况。</div>
          </div>
          <div class="page-tip">
             <div class="params-tip"><span>示例参数</span>：省份：辽宁分公司，地市：鞍山市分公司，物资/服务编码：01220107020000，是否服务类编码：否</div>
          </div>
        </el-row>
      </div>
    </el-main>
    <el-main>
      <el-table v-loading="listLoading" ref="table" border class="table-bottom" :data="tableData" element-loading-text="数据加载中...">
        <el-table-column align="center" type="index" label="序号" width="80" :index="indexMethod"></el-table-column>
        <el-table-column prop="materialCode" align="center" label="物资/服务编码"></el-table-column>
        <el-table-column prop="count" align="center" label="商合计算条目数"></el-table-column>
        <el-table-column prop="result" align="center" label="结果" show-overflow-tooltip></el-table-column>
        <el-table-column prop="unit" align="center" label="小类单位"></el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
          <el-pagination :page-sizes="[5, 10, 25, 50]" :current-page="paginationData['currentPage']" :page-size="paginationData['pageSize']"
            :total="paginationData['total']" layout="total, sizes, prev, pager, next, jumper" @current-change="currentChange"
            @size-change="handleSizeChange" />
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
  import provinces from './data.json'

  export default {
    data() {
      return {
        listLoading: false,
        queryCount:0,
        provinces,
        supplies: {
          id: '',
          provinces: '',
          cities: '',
          isService: ''
        },
        serviceAble: [{
            key: '否',
            value: '0'
          },
          {
            key: '是',
            value: '1'
          }
        ],
        tableData: [],
        allData: [],
        paginationData: {
          currentPage: 1,
          pageSize: 10,
          total: 0
        },
        suppliesRule: {
          id: [{
            required: true,
            message: '请输入物资/服务编码',
            trigger: 'blur'
          }],
          provinces: [{
            required: true,
            message: '请选择省份',
            trigger: 'blur,change'
          }],
          cities: [{
            required: true,
            message: '请选择地市',
            trigger: 'blur,change'
          }],
          isService: [{
            required: true,
            message: '请选择是否为服务类编码',
            trigger: 'blur,change'
          }]
        }
      }
    },
    created() {
      this.queryPageCount('1.4')
    },
    mounted() {},
    computed: {
      cities() {
        return provinces[this.supplies.provinces]
      }
    },
    methods: {
      // 分页跳转
      currentChange(targetPage) {
        this.paginationData['currentPage'] = targetPage
        // table数据接口
        this.getPageData()
      },
      // 分页跳转
      handleSizeChange(size) {
        this.paginationData['pageSize'] = size
        this.paginationData['currentPage'] = 1
        // table数据接口
        this.getPageData()
      },
      getPageData() {
        if (this.paginationData.currentPage * this.paginationData.pageSize <= this.paginationData.total) {
          this.tableData = (this.allData || []).slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.currentPage * this.paginationData.pageSize)
        } else {
          this.tableData = (this.allData || []).slice((this.paginationData.currentPage - 1) * this.paginationData.pageSize,
            this.paginationData.total)
        }
      },
      async buttonClick() {
        this.listLoading = true
        try {
          this.tableData = []
          this.allData = []
          await this.$refs['suppliesRule'].validate()
          const data = [{
            isService: this.supplies['isService'],
            city: this.supplies['cities'],
            province: this.supplies['provinces'],
            materialCode: this.supplies['id']
          }]
          const r = await this.$http({
            url: this.$http.adornBizUrl('/product/findPriceBymaterialCode'),
            method: 'post',
            data: this.$http.adornData(data, false)
          })
          if (r.data.data[0]) {
            this.allData = r.data.data || [];
            this.paginationData['total'] = this.allData.length || '0'
            this.getPageData()
          } else {
            this.allData = [];
            this.paginationData['total'] = 0
            this.getPageData()
          }

        } catch (e) {
          console.log(e)
        } finally {
          this.listLoading = false
        }
      },
      indexMethod(index) {
        return `${index + 1}`
      },
      changePrivce(e) {
        this.supplies['cities'] = ''
      },
      reset() {
        this.supplies = {
          id: '',
          provinces: '',
          cities: ''
        }
        this.tableData = []
        this.allData = []
        this.$refs['suppliesRule'].clearValidate()
      },
      change(e) {
        this.$forceUpdate()
      },
      async queryPageCount(scene) {
        try {
          const r = await this.$http({
            url: this.$http.adornBizUrl('/log/queryStatistics'),
            method: 'post',
            data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
            }
          })
          if(r.data.data && r.data.data.length >0){
              var result = r.data.data[0];
              this.queryCount=result.cnt||'0';
          }
        } catch (e) {
          console.log(e)
        } finally {
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_formatQueryPage";
  @include formatQueryPage(0, 60%, left);
  @include formatQueryPage(120px);
  .el-select, .el-input {
    width: 60%;
  }

  .col_button .button .el-button{
    width: 96px;
  }

  .query {
    color: rgba(255, 255, 255, 1);
    background: rgba(235, 75, 75, 1);
    border-radius: 6px;
    border-color: #eb4b4b;
  }
</style>
